<script setup lang="ts">
import useDashboardStore from '@/store/dashboard/dashboard'
import * as echarts from 'echarts'
import { storeToRefs } from 'pinia'
import { onMounted, ref, watchEffect } from 'vue'

const pieRef = ref<HTMLElement>()
const dashboardStore = useDashboardStore()
const { categoryCountDate } = storeToRefs(dashboardStore)

onMounted(() => {
  const myChart = echarts.init(pieRef.value!)

  watchEffect(() =>
    myChart.setOption({
      legend: {
        top: 'bottom'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [20, 100],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            { value: 40, name: 'rose 1' },
            { value: 38, name: 'rose 2' },
            { value: 32, name: 'rose 3' },
            { value: 30, name: 'rose 4' },
            { value: 28, name: 'rose 5' },
            { value: 26, name: 'rose 6' },
            { value: 22, name: 'rose 7' },
            { value: 18, name: 'rose 8' }
          ]
        }
      ]
    })
  )

  window.addEventListener('resize', () => {
    myChart.resize()
  })
})
</script>

<template>
  <div class="piechart">
    <div class="header">
      <h2 class="title">分类商品数量(玫瑰图)</h2>
    </div>
    <div class="content" ref="pieRef"></div>
  </div>
</template>

<style lang="less" scoped>
.piechart {
  height: 453px;
  background-color: #fff;
  border-radius: 4px;
}
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
  padding: 10px 20px;
  border-bottom: 1px solid #e4e7ed;
  box-sizing: border-box;
  .title {
    font-size: 18px;
    font-weight: 400;
  }
}
.content {
  padding: 20px;
  height: 350px;
}
</style>
